<template>
	<van-popup v-model="visible" position="bottom" get-container="body" :style="{ height: '94%' }" closeable>
		<!--背景图-->
		<div class="background">
			<img v-lazy="item.pic" alt="" />
			<div class="mask"></div>
		</div>

		<!--视频组件-->
		<div class="video-box" v-if="visible">
			<video :src="item.dyVideoUrl" controls ref="video"></video>
		</div>

		<!--商品预览-->
		<div class="goods-item animate_in" @click="$router.push('/goods-detail?gid=' + item.gid)">
			<div class="img-box"><img v-lazy="item.pic" alt="" /></div>
			<div class="goods-content">
				<div class="goods-name">{{ item.title }}</div>
				<div class="goods-info">
					<div class="discount">
						<div class="coupon">
							<div class="circle-left"></div>
							<div class="circle-right"></div>
							{{ item.couponMoney }}元券
						</div>
						<div class="subsidy">
							<div class="circle-left"></div>
							<div class="circle-right"></div>
							补贴¥{{ item.allowanceMoney | Fixed(2) }}
						</div>
					</div>
					<div class="sale">销量{{ item.sale | formatMyriadNum }}</div>
				</div>
				<div class="price">
					<div class="deal">
						到手价
						<p>
							¥
							<span>{{ item.endPrice | Fixed(2) }}</span>
						</p>
					</div>
					<div class="original">¥{{ item.price | Fixed(2) }}</div>
					<div class="share" @click.stop="toShare()">分享赚¥{{ item.shareMoney | Fixed(2) }}</div>
				</div>
			</div>
		</div>
		<authorize-dig ref="authorizeDig"></authorize-dig>
	</van-popup>
</template>

<script>
import { Popup } from 'vant';
import { AuthorizeDig } from '@/components';
import { mapGetters } from 'vuex';
export default {
	name: 'VideoPopup',
	components: {
		'van-popup': Popup,
		AuthorizeDig
	},
	data() {
		return {
			visible: false,
			item: {}
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		open(goodsItem) {
			let self = this;
			this.visible = true;
			setTimeout(() => {
				self.$refs.video.play();
			}, 2000);
			this.item = goodsItem;
		},
		close() {
			this.visible = false;
		},
		toShare() {
			if (this.userInfo.tbStatus === 1) {
				let params = {
					title: this.item.title,
					itemId: this.item.gid
				};
				this.$service.shopping.taobao.privilege(params).then(() => {
					this.$router.push({
						path: '/goods-share',
						query: {
							gid: this.item.gid,
						}
					});
				});
			} else {
				if (this.userInfo.tbStatus === 2) {
					this.$toast('亲亲，您的淘宝账号需补充支付宝实名认证信息，请先去认证哦！');
				}
				if (this.userInfo.tbStatus === 3) {
					this.$toast('授权过期，请重新授权');
				}
				this.$refs.authorizeDig.open('/index');
			}
		},
	}
};
</script>

<style lang="scss" scoped>
.van-popup {
	.background {
		width: 100%;
		height: 100%;
		position: relative;
		@include flexBox(center, center);
		img {
			margin-top: -70px;
			max-width: 100%;
			max-height: 100%;
		}
		.mask {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.3);
		}
	}
	/deep/.van-popup__close-icon {
		color: $color-white;
		z-index: 10;
		font-size: 60px;
		top: 24px;
		right: 24px;
	}
	.video-box {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 100%;
		margin-top: -70px;
		@include flexBox(center, center);
		video {
			width: 70%;
			border-radius: 20px;
		}
	}
	.goods-item {
		width: 594px;
		height: 210px;
		padding: 14px;
		background: $color-white;
		border-radius: 16px;
		position: absolute;
		left: -200px;
		bottom: -300px;
		box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
		animation: animate_in 1.5s linear;
		animation-fill-mode: forwards;
		@include flexBox(space-between);
		.img-box {
			width: 150px;
			height: 150px;
			margin-right: 16px;
			img {
				border-radius: 8px;
				max-width: 100%;
				max-height: 100%;
			}
		}
		.goods-content {
			flex: 1;
			overflow: auto;
			height: 182px;
			@include flexBox(space-between, null, column);
			.goods-name {
				font-size: 26px;
				color: $text-black;
				@include ellipsis;
			}
			.goods-info {
				margin-bottom: 4px;
				@include flexBox(space-between, center);
				.discount {
					height: 28px;
					display: flex;
					.coupon {
						line-height: 28px;
						padding: 0 18px;
						background: $main-color;
						border-radius: 4px;
						display: inline;
						font-size: 20px;
						color: $color-white;
						position: relative;
						margin-right: 20px;
					}
					.subsidy {
						line-height: 28px;
						padding: 0 18px;
						background: #ffeed1;
						border-radius: 4px;
						display: inline;
						font-size: 20px;
						color: #925114;
						position: relative;
					}
					.circle-left {
						width: 12px;
						height: 12px;
						background: #fff;
						position: absolute;
						border-radius: 50%;
						top: 50%;
						margin-top: -6px;
						left: -6px;
					}
					.circle-right {
						width: 12px;
						height: 12px;
						background: #fff;
						position: absolute;
						border-radius: 50%;
						top: 50%;
						margin-top: -6px;
						right: -6px;
					}
				}
				.sale {
					font-size: 20px;
					color: $text-grey;
				}
			}
			.price {
				@include flexBox(space-between, flex-end);
				.deal {
					font-size: 24px;
					color: $text-grey-default;
					p {
						color: $main-color;
						font-size: 28px;
						span {
							font-size: 36px;
						}
					}
				}
				.original {
					font-size: 20px;
					text-decoration: line-through;
					color: $text-grey-default;
					margin-right: -20px;
				}
				.share {
					width: fit-content;
					padding: 10px 12px;
					border-radius: 50px;
					background: linear-gradient(225deg, #f75601, #f7ab01);
					font-size: 26px;
					color: $color-white;
				}
			}
		}
	}
}
@keyframes animate_in {
	0% {
		left: -200px;
		bottom: -300px;
	}
	100% {
		left: 16px;
		bottom: 28px;
	}
}
</style>
